<template>
  <div class="home">
    <div class="row" id="row1">
      <div class="col col-lg-2">
        <router-link to="/">首页</router-link>
      </div>
      <div class="col col-lg-1">
        <router-link to="/birthday">生日蛋糕</router-link>
      </div>
      <div class="col col-lg-2">
        <router-link to="/party">聚会蛋糕</router-link>
      </div>
      <div class="col col-lg-1">
        <router-link to="/child">儿童蛋糕</router-link>
      </div>
      <div class="col col-lg-2">
        <router-link to="/hot">网红蛋糕</router-link>
      </div>
      <div class="col col-lg-1">
        <router-link to="/newcakes">新品专区</router-link>
      </div>

      <template v-if="isLogin">
        <div class="col col-lg-2">
          <!-- <router-link to="/user">欢迎你，{{ username }}</router-link> -->
          <router-link to="/user">{{ username }}
            <img style="width: 40px;border-radius: 50%;" src="../assets/22.jpg" alt="">
          </router-link>
          &nbsp;&nbsp; <span style="color: white">|</span>&nbsp;&nbsp;
          <a @click="loginOut" style="text-decoration: none; color: white"
            >注销</a
          >
        </div>
      </template>

      <template v-else>
        <div class="col col-lg-2">
          <router-link to="/login">登录</router-link> &nbsp;&nbsp;
          <span style="color: white">|</span>&nbsp;&nbsp;
          <router-link to="/regist">注册</router-link>
        </div>
      </template>
    </div>

    <div class="container-fluid">
      <div class="row" id="two">
        <div class="col col-lg-12" id="two">
          <div
            id="carouselExampleIndicators"
            class="carousel slide"
            data-bs-ride="true"
          >
            <div class="carousel-indicators">
              <button
                type="button"
                data-bs-target="#carouselExampleIndicators"
                data-bs-slide-to="0"
                class="active"
                aria-current="true"
                aria-label="Slide 1"
              ></button>
              <button
                type="button"
                data-bs-target="#carouselExampleIndicators"
                data-bs-slide-to="1"
                aria-label="Slide 2"
              ></button>
              <button
                type="button"
                data-bs-target="#carouselExampleIndicators"
                data-bs-slide-to="2"
                aria-label="Slide 3"
              ></button>
              <button
                type="button"
                data-bs-target="#carouselExampleIndicators"
                data-bs-slide-to="3"
                aria-label="Slide 4"
              ></button>
            </div>
            <div class="carousel-inner" data-bs-interval="2000">
              <div class="carousel-item" data-ride="carousel">
                <img
                  src="../assets/3.webp"
                  class="d-block w-100"
                  data-ride="carousel"
                  alt=""
                />
              </div>
              <div class="carousel-item active" data-bs-interval="2000">
                <img
                  src="../assets/2.webp"
                  class="d-block w-100"
                  data-ride="carousel"
                  alt=""
                />
              </div>
              <div class="carousel-item" data-bs-interval="2000">
                <img src="../assets/1.webp" class="d-block w-100" alt="" />
              </div>
              <div class="carousel-item" data-bs-interval="2000">
                <img
                  src="../assets/8.webp"
                  class="d-block w-100"
                  data-ride="carousel"
                  alt=""
                />
              </div>
            </div>
            <button
              class="carousel-control-prev"
              type="button"
              data-bs-target="#carouselExampleIndicators"
              data-bs-slide="prev"
            >
              <span
                class="carousel-control-prev-icon"
                aria-hidden="true"
              ></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button
              class="carousel-control-next"
              type="button"
              data-bs-target="#carouselExampleIndicators"
              data-bs-slide="next"
            >
              <span
                class="carousel-control-next-icon"
                aria-hidden="true"
              ></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
        </div>
      </div>

      <div class="row mt-5 mb-5">
        <div class="col col-lg-12">
          <h2 class="justify-content-center" style="color: #ff7bac">
            ~Products~
          </h2>
        </div>
      </div>

      <div class="row" style="height: 300px" v-for="(item, index) in cakes.slice(6, 7)" :key="index">
        <div class="col col-lg-1"></div>
        <div class="col col-lg-3">
          <div class="row">
            <div class="col col-lg-12">
              <img class="img1" :src="item.img" alt="" />
            </div>
            <div class="col col-lg-12 mt-3">
              <!-- <router-link :to="'/detail/?id=' + item.id"> -->
                <span @click="gotoGoods(item)" style="font-family: cursive;color: #ff7bac;font-size: 18px;display: inline-block;width: 180px;">{{ item.text2 }}</span>
              <!-- </router-link> -->
            </div>
          </div>
        </div>
        <div
          class="col col-lg-4"
          v-for="(item,index) in cakes.slice(7, 8)"
          :key="index"
        >
          <div class="row">
            <div class="col col-lg-12">
              <img class="img2" :src="item.img" alt="" />
            </div>
            <div class="col col-lg-12 mt-3">
              <!-- <router-link :to="'/detail/?id=' + item.id"> -->
                <span @click="gotoGoods(item)" style="  font-family: cursive; display: inline-block;color: #ff7bac;font-size: 18px; width: 180px; ">&nbsp;{{ item.text2 }}</span>
              <!-- </router-link> -->
            </div>
          </div>
        </div>
        <div
          class="col col-lg-3"
          v-for="(item,index) in cakes.slice(8, 9)" :key="index">
          <div class="row">
            <div class="col col-lg-12">
              <img class="img1" :src="item.img" alt="" />
            </div>
            <div class="col col-lg-12 mt-3">
              <!-- <router-link :to="'/detail/?id=' + item.id"> -->
                <span
                @click="gotoGoods(item)"
                  style="
                    font-family: cursive;
                    display: inline-block;
                    color: #ff7bac;
                    font-size: 18px;
                    width: 180px;
                  "
                  >{{ item.text2 }}</span
                >
              <!-- </router-link> -->
            </div>
          </div>
        </div>
      </div>

      <div class="mt-5" style="background-color: #f3f0f1">
        <router-link to="/newcakes">
          <div class="row m-0">
            <div class="col col-lg-3 mt-4">
              <h2 style="color: #ff7bac">新品/专区</h2>
            </div>

            <div class="row mt-3 mb-3">
              <div class="col col-lg-10 beijing">
                <div class="rexiao">
                  <div class="row justify-content-center">
                    <div
                      class="col col-lg-12 mt-5"
                      style="font-size: 22px; padding-top: 10px; color: #ff7bac"
                    >
                      新品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尝新
                    </div>
                    <div class="col col-lg-12 mt-2" style="color: #ff7bac">
                      21cakes / 新品推荐
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </router-link>

        <div class="row justify-content-center">
          <div
            class="col col-lg-3 m-3"
            v-for="(item, index) in cakes.slice(0, 6)"
            :key="index"
          >
            <div
              class="row"
              style="background-color: #fff; border: 1px solid gainsboro"
            >
              <div class="col col-12 justify-content-center">
                <img class="img3 mb-2 mt-2" :src="item.img" alt=" " />
              </div>
              <div class="col col-lg-5 mb-2">
                <span style="font-size: 18px; color: black"
                  >【{{ item.text1 }}】</span
                >
              </div>
              <div
                class="col col-lg-11 mx-3"
                style="overflow: hidden; height: 30px"
              >
                <small style="color: grey; font-size: 13px">{{
                  item.text2
                }}</small>
              </div>
              <div class="row">
                <div class="col col-lg-4">
                  <span
                    style="color: tomato; font-size: 17px; padding-top: 10px"
                    >{{ item.money }}元</span
                  >
                  <span style="color: tomato; font-size: 14px"> 起</span>
                </div>
                <div class="col col-lg-5"></div>
                <div class="col col-lg-3 mb-2">
                  <!-- <router-link :to="'/detail/?id=' + item.id"> -->
                    <button @click="gotoGoods(item)" class="float-lg-end buy">
                      购买>>
                    </button>
                  <!-- </router-link> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row" style="height: 30px"></div>
      </div>

      <div class="row mt-5 mb-5">
        <div class="col col-lg-10" style="margin: 0 auto">
          <h2 style="color: #ff7bac">蛋糕制作小屋</h2>
          <div class="row mt-5">
            <div class="col col-lg-6" style="">
              <img
                class="mt-4"
                style="width: 500px"
                src="../assets/21.png"
                alt=""
              />
            </div>
            <div class="col col-lg-5 mt-4">
              <div class="col ccol-lg-10 mt-4" style="text-align: left">
                <h4 style="color: #ff7bac">奶绿抹茶蛋糕</h4>
                <small class="mb-3" style="  display: inline-block; padding-top: 16px; line-height: 22px; height: 40px; " >1.奶油奶酪室温软化，搅拌至顺滑，加入白砂糖
                  继续搅拌顺滑，筛入抹茶粉，翻拌均匀。2.少量多次加入蛋液，每次充分搅拌均匀再加入奶油和淀粉，搅拌均匀。3.倒入模具，烤箱提前预热210°烤30分钟，
                  烤好后放凉，冰箱冷藏4小时。4.奶油做法:奶油奶酪十白砂糖，打至顺滑，加入淡奶油打发至硬性。5.冷藏好的巴斯克拿出，奶油抹面完成后,再次冰箱冷藏1小时,最后撒一层抹茶粉即可。
                </small>
                <hr />
              </div>

              <div class="col col-lg-10 mt-4">
                <router-link to="/test">
                  <div  style=" width: 200px;  height: 40px;  background-color: #ff7bac;  border-radius: 20px; " >
                  <h5 style="text-align: center; line-height: 40px; color: white" >
                    More+
                  </h5>
                </div>
                </router-link>
              </div>
            </div>
          </div>

          <div class="row mt-5">
            <div class="col col-lg-5 mt-4">
              <div class="col ccol-lg-10 mt-4" style="text-align: left">
                <h4 style="color: #ff7bac">奶绿抹茶蛋糕</h4>
                <small class="mb-3"  style="  display: inline-block;  padding-top: 16px; line-height: 22px;  height: 40px;" >1.奶油奶酪室温软化，搅拌至顺滑，加入白砂糖
                  继续搅拌顺滑，筛入抹茶粉，翻拌均匀。2.少量多次加入蛋液，每次充分搅拌均匀再加入奶油和淀粉，搅拌均匀。3.倒入模具，烤箱提前预热210°烤30分钟，
                  烤好
                  后放凉，冰箱冷藏4小时。4.奶油做法:奶油奶酪十白砂糖，打至顺滑，加入淡奶油打发至硬性。5.冷藏好的巴斯克拿出，奶油抹面完成后,再次冰箱冷藏1小时,最后撒一层抹茶粉即可。
                </small>
                <hr />
              </div>

              <div class="col col-lg-10 mt-4">
                <router-link to="/test">
                  <div style="  width: 200px;  height: 40px;  background-color: #ff7bac;  border-radius: 20px;  "  >
                  <h5 style="text-align: center; line-height: 40px; color: white" >  More+
                  </h5>
                </div>
                </router-link>
              </div>
            </div>
            <div class="col col-lg-6" style="">
              <img class="mt-4" style="width: 500px" src="../assets/5.webp"  alt="" />
            </div>
          </div>
        </div>
      </div>

      <div class="row justify-content-center" style="color: rgb(228, 228, 228); background-color: #ff7bac">
        <div class="col col-12 mt-3">
          <h5 style="color: rgb(228, 228, 228)" class="text-center">
            合作伙伴
          </h5>
        </div>
        <div class="col col-12 text-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-headset"
            viewBox="0 0 16 16"
>
            <path
              d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5z"
            />
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-exclude"
            viewBox="0 0 16 16"
          >
            <path
              d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm12 2H5a1 1 0 0 0-1 1v7h7a1 1 0 0 0 1-1V4z"
            />
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-pencil"
            viewBox="0 0 16 16"
          >
            <path
              d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
            />
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-messenger"
            viewBox="0 0 16 16"
          >
            <path
              d="M0 7.76C0 3.301 3.493 0 8 0s8 3.301 8 7.76-3.493 7.76-8 7.76c-.81 0-1.586-.107-2.316-.307a.639.639 0 0 0-.427.03l-1.588.702a.64.64 0 0 1-.898-.566l-.044-1.423a.639.639 0 0 0-.215-.456C.956 12.108 0 10.092 0 7.76zm5.546-1.459-2.35 3.728c-.225.358.214.761.551.506l2.525-1.916a.48.48 0 0 1 .578-.002l1.869 1.402a1.2 1.2 0 0 0 1.735-.32l2.35-3.728c.226-.358-.214-.761-.551-.506L9.728 7.381a.48.48 0 0 1-.578.002L7.281 5.98a1.2 1.2 0 0 0-1.735.32z"
            />
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-mic-fill"
            viewBox="0 0 16 16"
          >
            <path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" />
            <path
              d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"
            />
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-headset"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5z"
            />
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-exclude"
            viewBox="0 0 16 16"
          >
            <path
              d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm12 2H5a1 1 0 0 0-1 1v7h7a1 1 0 0 0 1-1V4z"
            />
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-pencil"
            viewBox="0 0 16 16"
          >
            <path
              d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"
            />
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-messenger"
            viewBox="0 0 16 16"
          >
            <path
              d="M0 7.76C0 3.301 3.493 0 8 0s8 3.301 8 7.76-3.493 7.76-8 7.76c-.81 0-1.586-.107-2.316-.307a.639.639 0 0 0-.427.03l-1.588.702a.64.64 0 0 1-.898-.566l-.044-1.423a.639.639 0 0 0-.215-.456C.956 12.108 0 10.092 0 7.76zm5.546-1.459-2.35 3.728c-.225.358.214.761.551.506l2.525-1.916a.48.48 0 0 1 .578-.002l1.869 1.402a1.2 1.2 0 0 0 1.735-.32l2.35-3.728c.226-.358-.214-.761-.551-.506L9.728 7.381a.48.48 0 0 1-.578.002L7.281 5.98a1.2 1.2 0 0 0-1.735.32z"
            />
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="currentColor"
            class="bi bi-mic-fill"
            viewBox="0 0 16 16"
          >
            <path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" />
            <path
              d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"
            />
          </svg>
        </div>
        <div class="col col-12 text-center mt-3">
          <span style="color: gainsboro">企业培训 | 合作事宜 | 版权投诉</span>
        </div>
        <div class="col col-12 text-center mb-2">
          <small
            >翼ICP12345678, 2019-2025 chaoliuchuanda.Powered by chaopai</small
          >
        </div>
      </div>
    </div>

    <!-- <div @click="gotoGoods()">111</div> -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HomeView",
  data() {
    return {
      cakes:[],
      list:[],
    };
  },
   mounted(){
      axios.get("https://7482d18d-c979-4ece-9949-c0a51c924ce6.mock.pstmn.io/lxy",{
      }).then((res)=>{
        this.cakes=res.data
        // console.log(this.cakes);
      }).catch(error=>{
        console.log(error);
      })
    },
  methods: {
    loginOut() {
      alert("确定要注销吗?");
      this.$store.dispatch("loginOut").then(() => {
        this.$router.push(`/`);
      });
    },
     gotoGoods(item) {
        console.log('首页',item);
          this.$router.push({
          name:'detail',
          params:{
            id:item.id,
            text1:item.text1,
            text2:item.text2,
            money:item.money,
            count:item.count,
            totalPrice:item.totalPrice,
            isChecked:item.isChecked,
            static:item.static,
            img:item.img
          }
      })
    },
  },
  computed: {
    isLogin() {
      return this.$store.state.userInfo.token != null;
    },
    username() {
      return this.$store.state.userInfo.name;
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.img1 {
  border-radius: 50%;
  width: 180px;
  height: 180px;
  border: 2px solid #ff7bac;
  margin-bottom: 10px;
}
.img2 {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  border: 2px solid #ff7bac;
  margin-bottom: 10px;
}
.img3 {
  width: 300px;
  height: 240px;
  margin: 10px;
}
#two {
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#col {
  height: 30px;
  line-height: 30px;
  margin: 0 0 10px 0;
}
.one {
  width: 260px;
}
.input1 {
  display: inline-block;
  width: 500px;
  height: 50px;
  border: 2px solid pink;
  background: url(../assets/search.png) no-repeat;
  background-size: 30px;
  background-position: 3rem;
  text-align: center;
}
.input2 {
  display: inline-block;
  height: 50px;
  border-left: none;
  border: none;
  width: 60px;
  color: white;
  background-color: #ff7bac;
}
#row1 {
  height: 60px;
  line-height: 60px;
  background-color: #ff7bac;
  font-size: 18px;
  margin: 0;
  border: 2px solide gainsboro;
}
#row1 a.router-link-exact-active {
  color: white;
  text-decoration: none;
}
a {
  text-decoration: none;
  color: white;
}
a:hover {
  font-size: 20px;
  color: white;
}
.beijing {
  background: url("../assets/20.webp");
  margin: 0 auto;
  height: 340px;
  background-size: 100% 340px;
}
.rexiao {
  width: 480px;
  height: 180px;
  background-color: rgba(254, 251, 251, 0.5);
  margin: 80px auto;
  border: 1px solid rgb(236, 234, 234);
}
.buy{
  border: none; 
  width: 70px; 
   height: 30px;
   font-size: 13px;
   border-radius: 10px;
}
.buy:hover{
  background-color: red;
  color:white;
  transform: scale(1.1);
}
</style>
